<template>
  <div style="margin-right: 20px; margin-left: -20px">
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    </BasicTable>
    <Detail @register="registerDesc"></Detail>
  </div>
</template>
<script lang="ts" name="user-login-log" setup>
import { ref, Ref, onMounted } from 'vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useDrawer } from '/@/components/Drawer';
import { useListPage } from '/@/hooks/system/useListPage'
import { useUserStore } from "/@/store/modules/user";
import { pageLoginLog } from './UserSetting.api'
import { loginLogColumns, loginLogSearchFormSchema } from './UserSetting.data';
import Detail from './commponents/LoginLogDetail.vue';
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();
const [registerDesc, { openDrawer: openLogDesc }] = useDrawer();

const { prefixCls, tableContext } = useListPage({
  designScope: 'login-log',
  tableProps: {
    title: '登录日志',
    api: pageLoginLog,
    columns: loginLogColumns,
    beforeFetch: (params) => {  
      params.userId = useUserStore().getUserInfo.id
    },
    bordered: false,
    canResize: false,
    rowSelectionTipType: 'onTableTitle',
    actionColumn: {
      width: 110,
      title: '操作',
      dataIndex: 'action',
      fixed: false,
      slots: { customRender: 'action' },
    },
    formConfig: {
      labelWidth: 80,
      schemas: loginLogSearchFormSchema,
      fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD HH:mm:ss']],
    },
  }
})

const [registerTable, { reload, getForm }, { }] = tableContext;

onMounted(async () => {

})


function getActions(record) {
  return [
    {
      label: '详情',
      onClick: handleDesc.bind(null, record),
    },

  ];
}

function handleDesc(record) {
  openLogDesc(true, {
    record,
    isUpdate: true,
  });
}
</script>
